<template>
    <div class="centerButton">
        <RadioGroup v-model:value="radioValue">
            <Radio v-for="(item, index) in radioList" class="radioClass" :value="item.value" :key="index">{{ item.key }}
            </Radio>
        </RadioGroup>
        <ul class="buttonUl">
            <li v-for="(items, index) in buttonList" :key="index">
                <a-button :class="items.bBoolean ? 'aDisable' : ''" :preIcon="items.preIcon"
                    @click="transferDataEmits(items)">
                </a-button>
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Radio } from 'ant-design-vue';
import { radioList } from '../enum/index';
const props = defineProps<{
    buttonList: object[]
}>()
const emits = defineEmits(['transferData','changeRadio']);
const RadioGroup = Radio.Group;
const radioValue = ref<number>(3); //单选默认值
const { buttonList } = props;
const transferDataEmits = (item: object) => {
  
    if (item.bBoolean) return;
    emits("transferData", item);
}

watch(radioValue,(newVal,oldVal)=>{ //监听Radio切换
    emits("changeRadio",newVal);
})

</script>
<style lang="less" scoped>
.centerButton {
    width: 100%;
    position: absolute;
    height: 300px;
    top: 45%;
    margin-top: -150px;
}

.radioClass {
    display: block;
    line-height: 30px;
}

.buttonUl {
    margin-top: 30px;

    li {
        margin: 15px 10px;
    }
}

.aDisable {
    border-color: #E4E4E4;
    color: #5E6B77;
    background-color: #F3F2F2;
    cursor: no-drop;
}
</style>